<template>
	<div>
		<el-dialog :visible.sync="visible1" title="危废信息" top="3%" width="40%">
			<el-form ref="form" :model="params1.wasteInfo" :rules="params1.rules" label-width="80px">
				<el-form-item label="危废代码" prop="wasteCode">
					<el-autocomplete style="width: 100%;" popper-class="wasteCode-autocomplete"
						v-model="params1.wasteInfo.wasteCode" :fetch-suggestions="querySearch" @select="handleSelect">
						<template slot-scope="props">
							<div class="name">
								{{ props.item.addenterwastecode }}&nbsp;&nbsp;{{props.item.addenterwastename }}&nbsp;&nbsp;
								<span class="addr">{{ props.item.addenterwastedesc }}</span>
							</div>
						</template>
					</el-autocomplete>
				</el-form-item>
				<el-form-item label="危废名称" prop="wasteName">
					<el-autocomplete style="width: 100%;" popper-class="wasteName-autocomplete"
						v-model="params1.wasteInfo.wasteName" :fetch-suggestions="querySearchName"
						:disabled="!params1.wasteInfo.wasteId" @select="handleSelectName">
						<template slot-scope="props">
							<div class="name">{{ props.item.name }}</div>
						</template>
					</el-autocomplete>
				</el-form-item>

				<el-form-item label="计量单位" prop="unitCode">
					<el-select v-model="params1.wasteInfo.unitCode" style="width: 100%;">
						<el-option :label="item.value" :value="item.code" v-for="(item,index) in params1.unitList" :key="index">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="废物类型" prop="wasteType">
					<el-select v-model="params1.wasteInfo.wasteType" style="width: 100%;">
						<el-option :label="item.value" :value="item.code" v-for="(item,index) in params1.wasteTypeList" :key="index">
						</el-option>
					</el-select>
				</el-form-item>

				<!-- <el-form-item label="包装形式" prop="packageType">
				<el-input v-model="params1.wasteInfo.packageType" style="width: 100%;"></el-input>
			</el-form-item> -->

				<el-form-item label="主要成分" prop="mainIngredients">
					<el-input type="textarea" :autosize="{ minRows: 3}" v-model="params1.wasteInfo.mainIngredients"
						style="width: 100%;"></el-input>
				</el-form-item>

				<el-form-item label="有害成分" prop="harmfulIngredients">
					<el-input type="textarea" :autosize="{ minRows: 3}" v-model="params1.wasteInfo.harmfulIngredients"
						style="width: 100%;"></el-input>
				</el-form-item>


				<el-form-item label="危险情况" prop="wasteCondition">
					<el-input type="textarea" :autosize="{ minRows: 3}" v-model="params1.wasteInfo.wasteCondition"
						style="width: 100%;"></el-input>
				</el-form-item>
				<el-form-item label="安全措施" prop="safetyMeasure">
					<el-input type="textarea" :autosize="{ minRows: 3}" v-model="params1.wasteInfo.safetyMeasure"
						style="width: 100%;"></el-input>
				</el-form-item>
				<el-form-item label="危险类别" prop="dangerTypeList">
					<el-checkbox-group v-model="params1.wasteInfo.dangerTypeList">
						<el-checkbox v-for="(item,index) in params1.typeList" :label="item.value" :key="item.value">
							{{item.label}}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="危险特性" prop="dangerCharacterList">
					<el-checkbox-group v-model="params1.wasteInfo.dangerCharacterList">
						<el-checkbox v-for="(item,index) in params1.characterList" :label="item.value">
							{{item.label}}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>

				<el-form-item label="容器类型" prop="packageType">
					<el-select v-model="params1.wasteInfo.packageType" style="width: 100%;">
						<el-option label="无包装" value="无包装" />
						<el-option label="有容器包装(包装袋)" value="有容器包装(包装袋)" />
						<el-option label="有容器包装(包装桶)" value="有容器包装(包装桶)" />
						<el-option label="有容器包装(包装箱)" value="有容器包装(包装箱)" />
						<el-option label="无容器包装" value="无容器包装" />
					</el-select>
				</el-form-item>

				<el-form-item label="容器材质" prop="packageTexture">
					<el-select v-model="params1.wasteInfo.packageTexture" style="width: 100%;">
						<el-option label="金属" value="金属" />
						<el-option label="塑料" value="塑料" />
						<el-option label="塑料复合" value="塑料复合" />
						<el-option label="其他" value="其他" />
					</el-select>
				</el-form-item>

				<el-form-item label="容器容量" prop="packageCapacity">
					<el-select v-model="params1.wasteInfo.packageCapacity" style="width: 100%;">
						<el-option label="0-25L" value="0-25L" />
						<el-option label="25-50L" value="25-50L" />
						<el-option label="50L-200L" value="50L-200L" />
						<el-option label="200L-1000L" value="200L-1000L" />
						<el-option label="其他" value="其他" />
					</el-select>
				</el-form-item>


				<el-form-item label="危废标识" prop="officialWasteId">
					<el-input placeholder="危废标识用于省系统API对接，请勿随意填写" v-model="params1.wasteInfo.officialWasteId"
						style="width: 100%;"></el-input>
				</el-form-item>

				<el-form-item label="年度计划产量" prop="planProdQty">
					<el-input placeholder="年度计划产量" v-model="params1.wasteInfo.planProdQty"
						style="width: 100%;"></el-input>
				</el-form-item>

				<el-form-item label="年度计划处置量" prop="planDisposeQty">
					<el-input placeholder="年度计划处置量" v-model="params1.wasteInfo.planDisposeQty"
						style="width: 100%;"></el-input>
				</el-form-item>

			</el-form>

			<div style="text-align: center;" slot="footer">
				<el-button v-if="params1.wasteInfo && params1.wasteInfo.id" type="danger"
					@click="deleteThis">删除</el-button>
				<el-button type="primary" @click="saveOrUpdate">保存</el-button>
				<el-button @click="cancle">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	let that
	export default {
		name: 'addWaste',
		components: {},
		props: ['entId', 'editData'],
		data() {
			return {
				visible1: false,
				params: {},
				params1: {
					visible: false,
					wasteInfo: {
						dangerTypeList: [],
						dangerCharacterList: [],
					},
					unitList: [],
					typeList: [{
							label: '刺激性',
							value: 'Irritant'
						},
						{
							label: '助燃',
							value: 'Oxidizing'
						},
						{
							label: '爆炸性',
							value: 'Explosive'
						},
						{
							label: '石棉',
							value: 'Asbestos'
						},
						{
							label: '易燃',
							value: 'Flammable'
						},
						{
							label: '有毒',
							value: 'Toxic'
						},
						{
							label: '腐蚀性',
							value: 'Corrosive'
						},
						{
							label: '有害',
							value: 'Harmful'
						}
					],
					characterList: [{
							label: '毒性',
							value: 'Toxic'
						},
						{
							label: '腐蚀性',
							value: 'Corrosive'
						},
						{
							label: '易燃',
							value: 'Flammable'
						},
						{
							label: '反应性',
							value: 'Reactivity'
						}
					],
					enterpriseId: '',
					rules: {
						wasteCode: [{
							required: true,
							message: '请输入危废代码',
							trigger: 'change'
						}],
						wasteName: [{
							required: true,
							message: '请输入危废名称',
							trigger: 'change'
						}],
						unitCode: [{
							required: true,
							message: '请选择计量单位',
							trigger: 'change'
						}],
						wasteType: [{
							required: true,
							message: '请选择废物类型',
							trigger: 'change'
						}]
					},
					wasteTypeList: []
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.categoryMainId = that.getQueryString("categoryMainId")
			that.params.ticketId = that.$store.state.token
			that.params.itemId = that.getQueryString("itemId")
			that.params.subjectId = that.getQueryString("subjectId")

			that.getUnitList();
			that.getEntWasteTypeList();
		},
		methods: {
			open(editData) {

				if (editData) {
					that.params1.wasteInfo = editData
					that.params1.wasteInfo.dangerTypeList = that.params1.wasteInfo.dangerTypeList || [];
					that.params1.wasteInfo.dangerCharacterList = that.params1.wasteInfo.dangerCharacterList || [];
				} else {
					that.params1.wasteInfo = that.$options.data().params1.wasteInfo
				}
				that.getUnitList()
				that.getEntWasteTypeList();
				that.visible1 = true
			},

			cancle() {
				that.visible1 = false
				that.$emit("cancle", true)
			},

			//删除危废
			deleteThis() {
				this.$confirm('此操作将删除此数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/hw/entWaste/deleteEntWaste?ticketId=' + that.params.ticketId,
						data: JSON.stringify([that.params1.wasteInfo]),
						contentType: 'application/json',
						success: function(result) {
							if (result.status && result.data) {
								that.visible1 = false
								that.$emit("success", true)
							}
						}
					})
				})
			},

			getEntWasteTypeList: function() {
				var _this = this;
				that.ajax({
					url: '/codeType/listCodeValue',
					data: {
						typeCode: 'ENT_WASTE_TYPE'
					},
					success: function(data) {
						if (data.status == 1) {
							_this.params1.wasteTypeList = data.data;
						}
					}
				});
			},

			getUnitList: function() {
				var _this = this;
				that.ajax({
					url: '/codeType/listCodeValue',
					data: {
						typeCode: 'UNIT_TYPE'
					},
					success: function(data) {
						if (data.status == 1) {
							_this.params1.unitList = data.data;
						}
					}
				});
			},

			saveOrUpdate: function() {
				var _this = this;
				_this.$refs['form'].validate(function(valid) {
					if (valid) {
						var dangerType = _this.params1.wasteInfo.dangerTypeList.join(",");
						let dangerCharacterList = _this.params1.wasteInfo.dangerCharacterList.join(",")
						var param = {
							id: _this.params1.wasteInfo.id,
							entId: _this.entId,
							wasteId: _this.params1.wasteInfo.wasteId,
							wasteCode: _this.params1.wasteInfo.wasteCode,
							wasteName: _this.params1.wasteInfo.wasteName,
							unitCode: _this.params1.wasteInfo.unitCode,
							amount: _this.params1.wasteInfo.amount,
							wasteCondition: _this.params1.wasteInfo.wasteCondition,
							safetyMeasure: _this.params1.wasteInfo.safetyMeasure,
							mainIngredients: _this.params1.wasteInfo.mainIngredients,
							harmfulIngredients: _this.params1.wasteInfo.harmfulIngredients,
							dangerType: dangerType,
							dangerCharacter: dangerCharacterList,
							officialWasteId: _this.params1.wasteInfo.officialWasteId,
							officialId: _this.params1.wasteInfo.officialId,
							wasteType: _this.params1.wasteInfo.wasteType,
							packageType: _this.params1.wasteInfo.packageType,
							packageTexture: _this.params1.wasteInfo.packageTexture,
							packageCapacity: _this.params1.wasteInfo.packageCapacity,
							planProdQty: _this.params1.wasteInfo.planProdQty,
							planDisposeQty: _this.params1.wasteInfo.planDisposeQty,
						}
						that.ajax({
							url: '/hw/entWaste/saveOrUpdateEntWaste?ticketId=' + that.params
								.ticketId,
							data: param,
							success: function(data) {
								if (data.status == 1) {
									that.params1 = that.$options.data().params1
									that.visible1 = false
									if (!param.id) {
										that.$emit("success", true)
									} else {
										that.$emit("success", true)
									}
									that.$message.success("保存成功！")
								}
							}
						});
					}
				})
			},

			querySearchName: function(queryString, cb) {
				that.ajax({
					url: '/entWaste/listWasteName',
					data: {
						keyword: queryString,
						wasteid: this.params1.wasteInfo.wasteId
					},
					success: function(result) {
						if (result.status == 1 && result.data) {
							cb(result.data);
						}
					}
				});
			},

			handleSelectName: function(item) {
				var _this = this;
				var wasteInfo = _this.params1.wasteInfo;
				wasteInfo.wasteName = item.name;
				wasteInfo.wasteNameId = item.id;
				_this.params1.wasteInfo = wasteInfo;
			},

			handleSelect: function(item) {
				var _this = this;
				var wasteInfo = _this.params1.wasteInfo;
				wasteInfo.wasteCode = item.addenterwastecode;
				wasteInfo.wasteId = item.id;
				_this.params1.wasteInfo = wasteInfo;
			},

			querySearch: function(queryString, cb) {
				var _this = this;
				that.ajax({
					url: '/entWaste/getWasteIdDropDownList.htm',
					data: {
						keyword: queryString
					},
					success: function(result) {
						for (var i in result.value) {
							result.value[i]['addenterwastecode'] = result.value[i][
									'addenterwastecode'
								]
								.replace(/<font color='red'>/g, '').replace(/<\/font>/g, '');
							result.value[i]['addenterwastename'] = result.value[i][
									'addenterwastename'
								]
								.replace(/<font color='red'>/g, '').replace(/<\/font>/g, '');
							if (queryString == result.value[i]['addenterwastecode']) {
								console.log(result.value[i])
								var wasteInfo = _this.params1.wasteInfo;
								wasteInfo.wasteId = result.value[i].id;
								_this.wasteInfo = wasteInfo;
							}
						}
						cb(result.value);
					}
				});
			},
		}
	}
</script>

<style>

</style>